<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menus &amp; toolbars in JavaScript GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, menus, toolbars, JavaScript, programming, Linux">
<meta name="description" content="This part of the JavaScript GTK tutorial covers menus &amp; toolbars.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Menus &amp; toolbars</h1>

<p>
In this part of the JavaScript GTK programming tutorial, 
we will work with menus &amp; toolbars.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A <b>menubar</b> is one of the most common parts of the GUI application. 
It is a group of commands located in various menus. While in console applications 
you have to remember all those arcane commands, here we have most of the commands 
grouped into logical parts. These are accepted standards that further reduce the 
amount of time spending to learn a new application. 
</p>


<h2>Simple menu</h2>

<p>
In our first example, we will create a menubar with one file menu. 
The menu will have only one menu item. By selecting the item the application quits. 
</p>


<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example shows a simple menu.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
Gdk = imports.gi.Gdk;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
 
        init_ui(this);
        
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Simple menu");
            w.set_position(Gtk.WindowPosition.CENTER);

            w.modify_bg(Gtk.StateType.NORMAL, 
                        new Gdk.Color({red:6400, green:6400, blue:6440}));
            
            var mb = new Gtk.MenuBar();

            var filemenu = new Gtk.Menu();
            var filem = new Gtk.MenuItem.with_label("File");
            filem.set_submenu(filemenu);
          
            var exitmu = new Gtk.MenuItem.with_label("Exit");
            exitmu.signal.activate.connect(Gtk.main_quit);              
            filemenu.append(exitmu);

            mb.append(filem);

            vbox = new Gtk.VBox.c_new(false, 2);
            vbox.pack_start(mb, false, false, 0);
            
            w.add(vbox);
            w.show_all();                     
        }
    }       
});


var window = new Example();
Gtk.main();
</pre>

<p>
This is a small example with minimal menubar functionality.
</p>

<pre class="explanation">
var mb = new Gtk.MenuBar();
</pre>

<p>
<b>MenuBar</b> widget is created. This is a container
for the menus. 
</p>

<pre class="explanation">
var filemenu = new Gtk.Menu();
var filem = new Gtk.MenuItem.with_label("File");
filem.set_submenu(filemenu);
</pre>

<p>
Toplevel <b>MenuItem</b> is created. 
</p>

<pre class="explanation">
var exitmu = new Gtk.MenuItem.with_label("Exit");
exitmu.signal.activate.connect(Gtk.main_quit);              
filemenu.append(exitmu);
</pre>

<p>
Exit <b>MenuItem</b> is created and appended to the
File <b>MenuItem</b>.
</p>

<pre class="explanation">
mb.append(filem);
</pre>

<p>
Toplevel <b>MenuItem</b> is appended to the <b>MenuBar</b>
widget. 
</p>

<pre class="explanation">
vbox = new Gtk.VBox.c_new(false, 2);
vbox.pack_start(mb, false, false, 0);
</pre>

<p>
Unlike in other toolkits, we have to take care of the layout management of the menubar
ourselves. We put the menubar into the vertical box. 
</p>

<img src="/img/gui/jsgtk/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>



<h2>Submenu</h2>

<p>
Our final example demonstrates how to create a submenu.
A submenu is a menu inside another menu. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example shows a submenu.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
Gdk = imports.gi.Gdk;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {

        init_ui(this);
      
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Submenu");
            w.set_position(Gtk.WindowPosition.CENTER);
            
            w.modify_bg(Gtk.StateType.NORMAL, 
                          new Gdk.Color({red:6400, green:6400, blue:6440}));
            
            var mb = new Gtk.MenuBar();

            var filemenu = new Gtk.Menu();
            var filem = new Gtk.MenuItem.with_label("File");
            filem.set_submenu(filemenu);

            mb.append(filem);
            
            var imenu = new Gtk.Menu();

            var importm = new Gtk.MenuItem.with_label("Import");
            importm.set_submenu(imenu);

            var inews = new Gtk.MenuItem.with_label("Import news feed...");
            var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks...");
            var imail = new Gtk.MenuItem.with_label("Import mail...");

            imenu.append(inews);
            imenu.append(ibookmarks);
            imenu.append(imail);

            filemenu.append(importm);
            
            var emi = new Gtk.MenuItem.with_label("Exit");
            emi.signal.activate.connect(Gtk.main_quit);
          
            filemenu.append(emi);

            var vbox = new Gtk.VBox.c_new(false, 2);
            vbox.pack_start(mb, false, false, 0);
            
            w.add(vbox);
            w.show_all();
        }
    }   
    
});


var window = new Example();
Gtk.main();
</pre>

<p>
Submenu creation. 
</p>

<pre class="explanation">
var imenu = new Gtk.Menu();
</pre>

<p>
A submenu is a <b>Menu</b>. 
</p>

<pre class="explanation">
var importm = new Gtk.MenuItem.with_label("Import");
importm.set_submenu(imenu);
</pre>

<p>
It is a submenu of a menu item, which belogs to toplevel
file menu. 
</p>

<pre class="explanation">
var inews = new Gtk.MenuItem.with_label("Import news feed...");
var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks...");
var imail = new Gtk.MenuItem.with_label("Import mail...");

imenu.append(inews);
imenu.append(ibookmarks);
imenu.append(imail);
</pre>

<p>
Submenus have their own menu items. 
</p>

<img src="/img/gui/jsgtk/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Image menu</h2>

<p>
In the next example, we will further explore the menus.
We will add images and accelerators to our menu items. 
<b>Accelerators</b> are keyboard shortcuts for activating menu items. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

In this example, we explore image menu
items, a separator, accelerators.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
Gdk = imports.gi.Gdk;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {

        init_ui(this);
        
        function init_ui(w) {

            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Image menu");
            w.set_position(Gtk.WindowPosition.CENTER);
            
            w.modify_bg(Gtk.StateType.NORMAL, 
                new Gdk.Color({red:6400, green:6400, blue:6440}));
            
            var mb = new Gtk.MenuBar();

            var filemenu = new Gtk.Menu();
            var filem = new Gtk.MenuItem.with_label("File");
            filem.set_submenu(filemenu);
            
            var agr = new Gtk.AccelGroup();
            w.add_accel_group(agr);

            var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr);
            newi.signal.activate.connect(function() {print("new")});
            filemenu.append(newi);

            var openm = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_OPEN, agr);
            filemenu.append(openm);

            var sep = new Gtk.SeparatorMenuItem();
            filemenu.append(sep);

            var exitmu = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_QUIT, agr);       

            exitmu.signal.activate.connect(Gtk.main_quit);
            filemenu.append(exitmu);

            mb.append(filem);

            var vbox = new Gtk.VBox.c_new(false, 2);
            vbox.pack_start(mb, false, false, 0);                
            
            w.add(vbox);
            w.show_all(); 
        }
    }       
});


var window = new Example();
Gtk.main();
</pre>

<p>
Our example shows a toplevel menu item with three sublevel menu items. Each of the
menu items has an image and an accelerator. The accelerator for the quit menu item
quits the application. The accelerator for the new menu item prints 'new' to the
console. 
</p>

<pre class="explanation">
var agr = new Gtk.AccelGroup();
w.add_accel_group(agr);
</pre>

<p>
To work with accelerators, we create a global <b>AccelGroup</b>
object. It will be used later.  
</p>

<pre class="explanation">
var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr);
newi.signal.activate.connect(function() {print("new")});
filemenu.append(newi);
</pre>

<p>
<b>ImageMenuItem</b> is created. The image comes from the stock
of images. The Ctrl+N accelerator is automatically created. We 
plug an anonymous method to the menu item. It will print a message
to the console. 
</p>

<pre class="explanation">
var sep = new Gtk.SeparatorMenuItem();
filemenu.append(sep);
</pre>

<p>
These lines create a separator. It is used to put menu items
into logical groups. 
</p>

<img src="/img/gui/jsgtk/imagemenu.png" alt="Image menu">
<div class="figure">Figure: Image menu</div>

<p>
Menus group commands that we can use in application. 
Toolbars provide a quick access to the most frequently used commands. 
</p>


<h2>Simple toolbar</h2>

<p>
Next we create a simple toolbar. A toolbar provides a quick
access to the most frequently used functionality of an application.
</p>


<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

In this example, we create a simple
toolbar.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {

        init_ui(this);
        
        function init_ui(w) {

            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Toolbar");
            w.set_position(Gtk.WindowPosition.CENTER);
            
            var toolbar = new Gtk.Toolbar();
            toolbar.set_style(Gtk.ToolbarStyle.ICONS);

            var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW);
            var opentb = new Gtk.ToolButton.from_stock(Gtk.STOCK_OPEN);
            var savetb = new Gtk.ToolButton.from_stock(Gtk.STOCK_SAVE);
            var sep = new Gtk.SeparatorToolItem();
            var quittb = new Gtk.ToolButton.from_stock(Gtk.STOCK_QUIT);

            toolbar.insert(newtb, 0);
            toolbar.insert(opentb, 1);
            toolbar.insert(savetb, 2);
            toolbar.insert(sep, 3);
            toolbar.insert(quittb, 4);
            
            quittb.signal.clicked.connect(Gtk.main_quit);
            
            var vbox = new Gtk.VBox.c_new(false, 2);
            vbox.pack_start(toolbar, false, false, 0);
            
            w.add(vbox);
            w.show_all(); 
        }
    }   
    
});


var window = new Example();
Gtk.main();
</pre>

<p>
The example shows a toolbar and four tool buttons. 
</p>

<pre class="explanation">
var toolbar = new Gtk.Toolbar();
</pre>

<p>
A <b>Toolbar</b> widget is created. 
</p>

<pre class="explanation">
toolbar.set_style(Gtk.ToolbarStyle.ICONS);
</pre>

<p>
On toolbar, we show only icons. No text. 
</p>

<pre class="explanation">
var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW);
</pre>

<p>
A <b>ToolButton</b> with an image from
stock is created. The image comes from the built-in stock of
images. 
</p>

<pre class="explanation">
var sep = new Gtk.SeparatorToolItem();
</pre>

<p>
This is a separator. It can be used to put toolbar buttons
into logical groups. 
</p>

<pre class="explanation">
toolbar.insert(newtb, 0);
toolbar.insert(opentb, 1);
...
</pre>

<p>
Toolbar buttons are inserted into the toolbar widget. The
first parameter of the <b>insert()</b> method is the tool button.
The second is the position on the toolbar. 
</p>

<img src="/img/gui/jsgtk/toolbar.png" alt="Toolbar">
<div class="figure">Figure: Toolbar</div>


<p>
In this chapter of the JavaScript GTK tutorial, we showed, 
how to work with menus &amp; toolbars.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified July 30, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


